<template>
  <el-container class="layout-container">
    <div class="container">
      <div class="content-wrapped">
        <!-- 侧边栏 -->
        <el-aside :style="{ width: '20%' }">
          <div class="project-wrapped">
            <div class="top">
              <div class="project-top">
                <div class="project-title">接口管理</div>
                <!-- <h2>接口管理</h2> -->
                <div class="project-add">
                  <el-button class=" add-project"> 
                  <i class="iconfont font-size-add">&#xe638;</i>
                    
                    添加项目 </el-button>
                </div>
                <div class="project-manage">
                  <i class="iconfont font-size-wenjianjia">&#xe797;</i>
                  <div class="project-manage-font">项目管理</div>
                </div>
              </div>
            </div>
            <div class="middle">
              <div class="project-middle">
                <div class="middle-left">
                  <i class="iconfont font-size-mulu">&#xe651;</i>
                  <div class="directory">项目目录</div>
                </div>
                <div class="middle-right">
                  <i class="iconfont font-size-right">&#xe638;</i>
                  <i class="iconfont font-size-right">&#xe605;</i>
                </div>
              </div>
            </div>
            <div class="footer">
              <el-menu
              
              background-color="#fff"
              :default-active="$route.path"
              router
            >
              <el-menu-item index="/home/get">
                
                <div class="font-green">GET</div>
                  <div>查&nbsp;找&nbsp;</div>
              </el-menu-item>
              <el-menu-item index="/home/post">
                <div class="font-blue">POST</div>
                  <div>添&nbsp;加&nbsp;</div>
              </el-menu-item>
              <el-menu-item index="/home/put">
                <div class="font-orange">PUT</div>
                  <div>修&nbsp;改&nbsp;</div>
              </el-menu-item>
              <el-menu-item index="/home/delete">
                <div class="font-pink">DELETE</div>
                  <div>删&nbsp;除&nbsp;</div>
              </el-menu-item>
               
            </el-menu>
            </div>
            
          </div>
        </el-aside>

        <!-- 右边 -->
        <el-container class="layout-right">
          <div class="content-right">
            <!--顶部栏目 -->
            <TopColumn></TopColumn>
            
            <div class="right-content">
              <router-view></router-view>
            </div>
            
          </div>
        </el-container>
      </div>
    </div>
  </el-container>
</template>

<script setup lang="ts">
import "@/assets/css/sidebar.scss";
// 引入top colunm
import TopColumn from '@/components/top_column/index.vue'
</script>

<style lang="scss" scoped>
.content-right {
  width: 100%;
}
 
//
.layout-container {
  height: 100vh;
  .el-aside {
    background-color: #ffffff;
    .el-menu {
      border-right: none;
    }
  }
  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dropdown__box {
      display: flex;
      align-items: center;
      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #f7ecec;
  }
}
.layout-right {
  display: flex;
  flex: 0.959;
  flex-direction: column;
}
</style>
